<template>
  <nav class="navbar">
    <ul>
      <li><img src="@/assets/logo.png" alt="Logo" class="logo" :style="{ height: isMobile? '30px' : '40px' }"></li>
      <li><router-link to="/"><i class="fas fa-home"></i> 首页</router-link></li>
      <li><router-link to="/restaurant"><i class="fas fa-utensils"></i> 餐厅</router-link></li>
      <li><router-link to="/user-info"><i class="fas fa-user"></i> 用户信息</router-link></li>
    </ul>
  </nav>
</template>

<style scoped>
.navbar {
  background-color: #333;
  color: white;
  padding: 15px;
  height: 60px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between; /* 增加这一行，使元素分布更合理 */
}

.navbar.logo {
  margin-right: 20px;
  transition: all 0.3s ease;
}

.navbar.logo:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.navbar li {
  display: inline;
  margin-right: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 5px 10px;
  transition: all 0.3s ease;
}

.navbar li:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar a {
  color: white;
  text-decoration: none;
  position: relative;
  padding: 5px 0;
  transition: all 0.3s ease;
}

.navbar a:hover {
  color: #ccc;
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ccc;
  transition: all 0.3s ease;
}

.navbar a:hover::after {
  width: 100%;
}

.navbar a.router-link-active {
  background-color: #555;
  padding: 5px 10px;
  border-radius: 3px;
  transition: all 0.3s ease;
  color: white;
}

@media (max-width: 768px) {
  .navbar li {
    display: block;
    margin: 15px 0;
  }

  .navbar a {
    font-size: 18px;
  }

  .navbar.logo {
    height: 30px;
    margin-right: 15px;
  }
}

/* 新增以下媒体查询，用于在更小屏幕尺寸下进一步调整布局 */
@media (max-width: 480px) {
  .navbar {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  .navbar.logo {
    margin-bottom: 10px;
    margin-right: 0;
  }

  .navbar ul {
    flex-direction: column;
    align-items: center;
  }

  .navbar li {
    margin: 10px 0;
  }
}
</style>
<script>
export default {
  data() {
    return {
      isMobile: false
    };
  },
  mounted() {
    // 根据屏幕宽度动态设置是否为移动端
    this.isMobile = window.innerWidth <= 768;
    window.addEventListener('resize', () => {
      this.isMobile = window.innerWidth <= 768;
    });
  }
};
</script>
